<template>
  <div>

	  
	
	<myheader />
	
	<br>
	<!--面包屑导航-->
	<Breadcrumb :datas="datas" ></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
						<img class="img-fluid" :src="src">
					</div>
					<div class="product-thumbnails"><a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a></div>
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
					<h2 class="mb-3 mt-0">{{ name }}</h2>
					<p class="lead mt-2 mb-3 primary-color">${{ price }}</p>
					<h5 class="mt-4">商品简介</h5>
					<p>{{ desc }}</p>

					<p>颜色:{{ color }}</p>
					<p>号码:{{ size }}</p>
					<p>季节:{{ season }}</p>



					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>
					
					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->
					
					<a href="#" class="btn btn-full-width btn-lg btn-outline-primary">Add to cart</a>

					<br><br>
					<!-- <Button color="yellow" @click="attention">关注该商品</Button> -->
					<div>
						<Button :circle='true' @click='goodflow' color="red">{{gzbutton}}</Button>
								
					</div>

				</div>
			</div>
		</div>
	</section>
	
	<div class="divider"></div>

	<section class="products text-center">
		<div class="container">

			<textarea v-model="content"></textarea>
			<!-- <textarea v-model="content" name="" id="" cols="30" rows="10"></textarea> -->

			<br><br>

			<Button color="blue" @click="comment">评论</Button>
			<br>
			
			<comments :commentlist="this.commentlist" :myuser="this.myuser"></comments>

			<!-- 评论展示 -->
			<!-- <ul> -->
<!-- 
				<li v-for="item in commentlist">

					{{item.uid | myfilter}}:{{item.content}}

				</li>
			</ul> -->
			
		</div>
	</section>


	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
			

		</div>
	</section>
	
	
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
import comments from './comments.vue';

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  datas:[{title:'首页',route:{name:'index'}},{title:'商品详情页'}],
      //商品id
      id:'',
      name:'',
      price:'',
      desc:'',
      color:'',
      size:'',
      season:'',
      img:'',
	  src:'',
	  //   评论内容
	  content:'',
	  //   评论列表
	  commentlist:[],
	  //   用户信息字典
	  myuser:{},
	  //   关注按钮
	  type:0,
	  gzbutton:'关注该商品',
    }
},

//   自定义过滤器
filters:{

	// 自定义方法
	myfilter:function(value){

		// 通过key（用户id）取用户名
		return window.that.myuser[value];

	},

},
//注册组件标签
components:{

	myheader,
	comments,

},
// //   在渲染之前就定义that变量
// beforeCreater:function(){

// 	window.that = this;

// },

mounted:function(){

	window.that = this;

  	//接收商品id
	  var id = this.$route.query.id;
	  

  	this.id = id;


  	//调用接口
  	this.getdata();

	// 调用评论接口
	this.get_comment();

	// 调用用户列表
	this.get_user();
	
  
},
methods:{
	//商品被多少人关注
		goodflow(){
			if (this.type == 1) {
				this.gzbutton = '关注该商品'
				this.type = 0
			}
			else if(this.type ==0){
				this.gzbutton = '取消关注'
				this.type = 1
			}
			this.axios.get("http://127.0.0.1:8000/getflow/",{params:{id:this.$route.query.id,uid:localStorage.getItem("uid"),type:this.type}}).then(resp=>{
				console.log(resp)
				this.$Message(resp.data.message)
				
				
				// console.log(this.count)
				// console.log(this.guanzhu)
			})
		},
	
	//   调用所有用户
	get_user:function(){
		//发送请求
		this.axios.get('http://localhost:8000/userlist/').then((result) =>{

				// console.log(result);
				// 动态赋值
				for(let i=0,l=result.data.length;i<l;i++){

					this.myuser[result.data[i].id] = result.data[i].username;

				}
				// console.log(this.myuser)

		});
	},

	//   调用评论列表
	get_comment:function(){
		//发送请求
		this.axios.get('http://localhost:8000/commentlist/',{params:{id:this.id}}).then((result) =>{

				// console.log(result);
				this.commentlist = result.data;

		});
	},
	//   评论方法
	comment:function(){
		if(this.content == ""){
			this.$Message("评论不能为空");
			return false;
		}
	
		//发送请求
		this.axios.post('http://localhost:8000/insertcomment/',this.qs.stringify({gid:this.id,content:this.content,
		uid:localStorage.getItem("uid")})).then((result) =>{
			

				// console.log(result);
				if(result.data.code==200){
					this.$Message(result.data.message);
					// 将拼评论内容和作者实时填充到评论中
					this.commentlist.unshift({"uid":localStorage.getItem('uid'),"content":this.content});
					this.content = "";
				}else{
					this.$Message(result.data.message);
				}					

		});

	},

  	//商品信息接口
  	getdata:function(){


  		//发送请求
      this.axios.get('http://localhost:8000/goodinfo/',{params:{id:this.id}}).then((result) =>{

            //   console.log(result);

              this.name = result.data.name;
              this.desc = result.data.desc;
              this.price = result.data.price;
              this.img = result.data.img;

              var parms = result.data.parms;

              //转换类型
              parms = JSON.parse(parms);

              this.color = parms.color;
              this.size = parms.size;
              this.season = parms.season;
              this.src = 'http://localhost:8000/static/upload/'+result.data.img;

            //   console.log(parms);

              

      });



  	}

     
  }
}


</script>
 
<style>



</style>